<template>
  <div class="home">
    <!-- 用户收入情况 -->
    <el-card shadow="hover" class="usermone">
      <el-row :gutter="15" class="home-recommend-row">
        <el-col
          :sm="24"
          :md="12"
          :lg="6"
          :xl="6"
          class="mr"
        >
          <div class="home-recommend" style="background-color: #48D18D">
            <i class="el-icon-food" style="color: #64d89d"></i>
            <div class="home-recommend-auto">
              <div>今日新增用户</div>
              <div class="home-recommend-msg">数量：{{userdata.dayCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            class="mr"
        >
          <div class="home-recommend" style="background-color: #F95959">
            <i class="el-icon-shopping-bag-1" style="color: #F86C6B"></i>
            <div class="home-recommend-auto">
              <div>今日新增文章</div>
              <div class="home-recommend-msg">数量：{{articledata.dayCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            class="mr"
        >
          <div class="home-recommend" style="background-color: #8595F4">
            <i class="el-icon-school" style="color: #92A1F4"></i>
            <div class="home-recommend-auto">
              <div>今日新增食材评论</div>
              <div class="home-recommend-msg">数量：{{commentsdata.dayCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            class="mr"
        >
          <div class="home-recommend" style="background-color: #FEBB50">
            <i class="el-icon-alarm-clock" style="color: #FDC566"></i>
            <div class="home-recommend-auto">
              <div>今日新增文章评论</div>
              <div class="home-recommend-msg">数量：{{messagedata.dayCount}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 活跃用户 -->
    <el-row :gutter="15" class="userhy">

      <el-col :md="24" :lg="14" :xl="10" class="mt15">
        <el-card shadow="hover" >
<!--            表图容器-->
          <div id="myChart" style="width: 100%;height: 400px"></div>
        </el-card>
      </el-col>


      <el-col :md="24" :lg="10" :xl="10" class="mt15">
        <el-card shadow="hover">
          <div slot="header">
            <span>实时概括</span>
          </div>
          <div class="realcon">
            <el-row :gutter="15">
              <el-col :md="24" :lg="12" :xl="12" class="reals">
                <div class="realstop">
                  <div class="r-t-left">
                    <div class="leftcon">
                      <i class="iconfont icon-huiyuan iconstyle"></i>
                    </div>
                  </div>
                  <div class="r-t-right">
                    <span>总用户数</span>
                    <span>{{userdata.count}}</span>
                  </div>
                </div>

              </el-col>
              <el-col :md="24" :lg="12" :xl="12" class="reals">
                <div class="realstop">
                  <div class="r-t-left">
                    <div class="leftcon">
                      <i class="iconfont icon-yonghu iconstyle"></i>
                    </div>
                  </div>
                  <div class="r-t-right">
                    <span>文章数</span>
                    <span>{{ articledata.count }}</span>
                  </div>
                </div>

              </el-col>
              <el-col :md="24" :lg="12" :xl="12" class="reals">
                <div class="realstop">
                  <div class="r-t-left">
                    <div class="leftcon">
                      <i class="iconfont icon-duosucai iconstyle"></i>
                    </div>
                  </div>
                  <div class="r-t-right">
                    <span>食材数</span>
                    <span>{{fooddata.count}}</span>
                  </div>
                </div>

              </el-col>
              <el-col :md="24" :lg="12" :xl="12" class="reals">
                <div class="realstop">
                  <div class="r-t-left">
                    <div class="leftcon">
                      <i
                          class="
                          iconfont
                          icon-dingdandingdanmingxishouzhimingxi
                          iconstyle
                        "
                      ></i>
                    </div>
                  </div>
                  <div class="r-t-right">
                    <span>消息总数</span>
                    <span>{{commentsum}}</span>
                  </div>
                </div>

              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import request from "@/router/request";

export default {
  data() {
    return {
      user: sessionStorage.getItem('user1')?JSON.parse(sessionStorage.getItem('user1')) : {username:""},
      userdata:{},//用户  count是总量，dayCount是当天的量
      articledata:{},//文章
      fooddata:{},//食材
      messagedata:{},//文章评论
      commentsdata:{},//食材评论
      activeIndex: 2, //日月周
      value1: "",
      commentsum: 0,//消息总数
      data1:[],
      data2:[],
      option:{
        title: {
          text: '实况树形图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['用户数',  '评论数数', '食材数','文章数']
        },
        series: [
          {
            name:'总数量',
            type: 'bar',
            data: []
          },

          {
            name:'当日数量',
            type: 'bar',
            data: []
          },

        ]
      }
    };

  },

  created() {
    if (this.user.cover!=1){
      this.$message.error("您的账号不是管理员账号请重新登录")
      this.$router.push("/login")
    }
    this.load()

  },
  methods:{
    load(){
      request.get("/user/count").then(res=>{
        this.userdata=res.data;
        this.option.series[0].data[0]=res.data.count
        this.option.series[1].data[0]=res.data.dayCount
        this.showCharts();
      });

      request.get("/message/count").then(res=>{
        this.messagedata=res.data
        this.commentsum+=res.data.count

      });


      request.get("/comment/count").then(res=>{
        this.commentsdata=res.data
        this.commentsum+=res.data.count
        this.option.series[0].data[1]=this.commentsum
        this.option.series[1].data[1]=res.data.dayCount
        this.showCharts();
      });


      request.get("/food/count").then(res=>{
        this.fooddata=res.data
        this.option.series[0].data[2]=res.data.count
        this.option.series[1].data[2]=res.data.dayCount
        this.showCharts();
      });


      request.get("/article/count").then(res=>{
        this.articledata=res.data
        this.option.series[0].data[3]=res.data.count
        this.option.series[1].data[3]=res.data.dayCount
        this.showCharts();
      });

    },

    showCharts(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.option);
    },
  },
  mounted() {
    this.showCharts()
  },

};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  overflow: hidden;
  .usermone {
    ::v-deep.el-card__body {
      padding-bottom: 5px;
    }
  }
  .mt15 {
    margin-top: 15px;
    .datebtn {
      float: right;
      margin: -3px 5px;
      cursor: pointer;
    }
    .datemoney {
      float: right;
      margin: -3px 5px;
      width: 180px;
    }
  }

  .home-recommend-row {
    .mr {
      margin-bottom: 15px;
    }
    .home-recommend {
      position: relative;
      height: 100px;
      color: #ffffff;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      &:hover {
        i {
          right: 0px !important;
          bottom: 0px !important;
          transition: all ease 0.3s;
        }
      }
      i {
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-size: 70px;
        transform: rotate(-30deg);
        transition: all ease 0.3s;
      }
      .home-recommend-auto {
        padding: 15px;
        position: absolute;
        left: 0;
        top: 5%;
        .home-recommend-msg {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }
  }

  .charts {
    width: 100%;
    height: 282.6px;
    display: flex;
    padding: 12px 15px;
    .charts-left {
      flex: 1;
      height: 100%;
      .h100 {
        height: 100%;
      }
    }
    .charts-right {
      flex: 1;
      height: 100%;
    }
  }
  .home-charts {
    height: 282.6px;
    .home-charts-item {
      background-color: #f5f5f5;
      padding: 19px 15px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      cursor: pointer;
      &:last-of-type {
        margin-bottom: 0;
      }
      &:hover {
        .home-charts-item-right {
          i {
            transform: rotate(45deg);
            transition: all ease 0.3s;
          }
        }
      }
      .home-charts-item-left {
        flex: 1;
        .home-charts-item-title {
          font-size: 13px;
        }
        .home-charts-item-num {
          font-size: 20px;
          margin-top: 5px;
        }
      }
      .home-charts-item-right {
        i {
          font-size: 20px;
          padding: 8px;
          border-radius: 100%;
          transition: all ease 0.3s;
        }
      }
    }
  }

  .userhy {
    .hyyhbody {
      ::v-deep.el-card__body {
        height: 247px;
      }
    }
    .userhycon {
      .users {
        display: flex;
        padding: 10px 0;
        .usersleft {
          flex: 1;
          margin-right: 15px;
        }
        .usersright {
          flex: 9;
          span {
            display: inline-block;
            width: 50%;
          }
          .user-t {
            span {
              &:first-child {
                color: #333;
                font-size: 14px;
              }
              // &:last-child {
              //   color: #999;
              //   font-size: 12px;
              // }
            }
          }
          .user-b {
            span {
              &:first-child {
                color: #999;
                font-size: 11px;
              }
              &:last-child {
                color: #999;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .realcon {
      .reals {
        padding: 10px 0;
        &:nth-child(2) {
          .realstop {
            .r-t-left {
              .leftcon {
                background-color: #03bb2a;
              }
            }
          }
        }
        &:nth-child(3) {
          .realstop {
            .r-t-left {
              .leftcon {
                background-color: #f3d026;
              }
            }
          }
        }
        &:nth-child(4) {
          .realstop {
            .r-t-left {
              .leftcon {
                background-color: #03b4fd;
              }
            }
          }
        }
        .realstop {
          display: flex;
          align-items: center;
          .r-t-left {
            flex: 5;
            display: flex;
            justify-content: center;
            .leftcon {
              display: inline-block;
              background-color: #fd7c26;
              width: 60px;
              height: 60px;
              border-radius: 50%;
              line-height: 60px;
              text-align: center;
              .iconstyle {
                color: #ffffff;
                font-size: 20px;
              }
            }
          }
          .r-t-right {
            flex: 5;
            display: flex;
            flex-direction: column;
            span {
              color: #333;

              &:first-child {
                font-size: 14px;
                margin-bottom: 10px;
              }
              &:last-child {
                font-size: 18px;
              }
            }
          }
        }
        .realsbot {
          color: #999;
          font-size: 11px;
          margin-top: 10px;
          text-align: center;
        }
      }
    }
  }
}
</style>
